<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件登录页</title>
    <link rel="stylesheet" href="../html/css/04.css">
	
</head>
<body>
	
	<div class="text">
		<h2>Peaky Binders
		</h2>
	</div>
	<svg>
		<filter id="fire">
			<feTurbulence id="turbulence" baseFrequency="0.1 0.1" numOctaves="2" seed="3">
			<animate attributeName="baseFrequency" dur="10s"
			values="0.1 0.1;0.12 0.2"
			repeatCount="indefinite"></animate></feTurbulence>
			
			
		<feDisplacementMap in="SourceGraphic" scale="25"></feDisplacementMap>
		</filter>
	</svg>
    <div class="login">
        <h1 class="dl">Join P·B</h1>
        <form action="" >
            <input type="text" id="name" placeholder="账号">
            <input type="password" id="pass" placeholder="密码">
			<input type="password" id="pass1" placeholder="确认密码" >
            <button class="zc" onclick="return kk();" type="button">登录</button>
		
        </form>
    </div>
<div class="footer">
	<img src="../html/img/2.jpg" alt="">
		Copyright © 2023 KK&CC. All rights reserved.
		© 2023 KK&CC. All rights reserved.
		© 2023 KK&CC. 版权所有
		Copyright © 2023 KK&CC.
		KK&CC. © 2023
	</div>
    <script>
	
	function kk() {
		var username = document.getElementById("name").value;
	  var password = document.getElementById("pass").value;
	  var password1 = document.getElementById("pass1").value;
	 // 添加账号验证部分
	    if (username == "") {
	        alert('账号不能为空');
	        return false;
	    }
	
	    if (!/^[A-Za-z0-9]+$/.test(username)) {
	        alert('账号格式不正确，只能包含字母和数字');
	        return false;
	    }
	
	    if (username.length < 6 || username.length > 16) {
	        alert('账号长度必须在6-16个字符之间');
	        return false;
	    }
	
	    if (password == "") {
	        alert('密码不能为空');
	        return false;
	    }
	    
	    if (password !== password1 || password == "") {
	        alert('密码错误');
	        return false;
	    }
	
	alert("欢迎您的到来")
	    window.open('./02.html', '');
	    
	    return true;
	  
	}
	
		
        //获取 login
        let login = document.querySelector('.login')

        let span
        let inTime, outTime
        let isIn = true //默认开关 打开
        let isOut

        //鼠标进入事件
        login.addEventListener('mouseenter', function(e)
        {
            isOut = false //预先关闭，若不进入if语句，则不能进入鼠标离开事件里的 if
            if(isIn)
            {
                inTime = new Date().getTime()

                //生成 span 元素并添加进 login 的末尾
                span = document.createElement('span')
                login.appendChild(span)

                //span 去使用 in动画
                span.style.animation = 'in .5s ease-out forwards'

                //计算 top 和 left 值，跟踪鼠标位置
                let top = e.clientY - e.target.offsetTop
                let left = e.clientX - e.target.offsetLeft

                span.style.top = top + 'px'
                span.style.left = left + 'px'

                isIn = false //当我们执行完程序后，关闭
                isOut = true //当我们执行完里面的程序，再打开
            }

        })
        //鼠标离开事件
        login.addEventListener('mouseleave', function(e)
        {
            if(isOut)
            {
                outTime = new Date().getTime()
                let passTime = outTime - inTime

                if(passTime < 500)
                {
                    setTimeout(mouseleave, 500 - passTime) //已经经过的时间就不要了
                }
                else
                {
                    mouseleave()
                }
            }

            function mouseleave()
            {
                span.style.animation = 'out .5s ease-out forwards'

                //计算 top 和 left 值，跟踪鼠标位置
                let top = e.clientY - e.target.offsetTop
                let left = e.clientX - e.target.offsetLeft

                span.style.top = top + 'px'
                span.style.left = left + 'px'

                //注意：因为要等到动画结束，所以要给个定时器
                setTimeout(function()
                {
                    login.removeChild(span)
                    isIn = true //当我们执行完鼠标离开事件里的程序，才再次打开
                }, 500)
            }
        })
		
		
    </script>
</body>
</html> 